<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <title>餐品类型管理</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple">
            <el-button type="primary" @click="add">添加类型</el-button>
        </div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple-light">
            <template>
                <el-radio v-model="productsType.typeState" label="1">上架中</el-radio>
                <el-radio v-model="productsType.typeState" label="2">已下架</el-radio>
                <el-radio v-model="productsType.typeState" label="0">已删除</el-radio>
            </template>
        </div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple">
            <el-input v-model="productsType.typeName" placeholder="请输入内容"></el-input>
        </div></el-col>

        <el-col :span="4"><div class="grid-content bg-purple-light">
            <el-button type="primary"  @click="loadAllProductsType(productsType.pageIndex,productsType.pageSize,productsType.typeName,productsType.typeState)">搜索</el-button>
        </div></el-col>
    </el-row>

    <el-table
            :data="productsType.list"
            style="width: 100%">
        <el-table-column
                prop="typeName"
                label="类型"
                width="100">
        </el-table-column>
        <el-table-column
                prop="typeState"
                label="状态"
                width="100">
            <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.typeState==0">已删除</el-tag>
            <el-tag type="success" v-if="scope.row.typeState==1">上架中</el-tag>
            <el-tag type="warning" v-if="scope.row.typeState==2">已下架</el-tag>
        </template>
        </el-table-column>
        <el-table-column
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button v-if="scope.row.typeState==1" @click="updateState(scope.row.typeId,2)"  type="text" size="small">下架</el-button>
                <el-button v-if="scope.row.typeState==1||scope.row.typeState==2" @click="updateState(scope.row.typeId,0)"  type="text" size="small">删除</el-button>
                <el-button v-if="scope.row.typeState==1||scope.row.typeState==2" @click="updateName(scope.row.typeId)"  type="text" size="small">修改名称</el-button>
                <el-button v-if="scope.row.typeState==2" @click="updateState(scope.row.typeId,1)"  type="text" size="small">恢复上架</el-button>
                <el-button v-if="scope.row.typeState==0"  type="text" size="small">无法恢复</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="productsType.pageIndex"
            :page-sizes="[2, 3, 4, 5]"
            :page-size="productsType.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="productsType.total">
    </el-pagination>
    <el-dialog
            title="修改类型名称"
            :visible.sync="updateWindow"
            width="30%"
            :before-close="handleClose">
        <span>请修改餐品类型名称</span>
        <el-input v-model="updateTypeName" placeholder="请输入内容"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="updateWindow = false">取 消</el-button>
    <el-button type="primary" @click="checkUpdateName">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
            title="添加餐品类别"
            :visible.sync="addWindow"
            width="30%"
            :before-close="handleClose">
        <span>请输入需要添加的餐品类型名称</span>
        <el-input v-model="addTypeName" placeholder="请输入内容"></el-input>
        <span slot="footer" class="dialog-footer">
    <el-button @click="addWindow = false">取 消</el-button>
    <el-button type="primary" @click="checkAdd">确 定</el-button>
  </span>
    </el-dialog>

</div>
<script src="../js/productsType.js" type="text/javascript"></script>
</body>
</html>